<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    
    <head>
        <title>
        </title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="../css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="../css/ui-box.css">
        <link rel="stylesheet" href="../css/ui-base.css">
        <link rel="stylesheet" href="../css/ui-color.css">
        <link rel="stylesheet" href="../css/appcan.icon.css">
        <link rel="stylesheet" href="../css/appcan.control.css">
        <link rel="stylesheet" href="../css/index.css">
    </head>
    
    <body class="" ontouchstart>
        <div class="bc-bg" tabindex="0" data-control="PAGE" id="Page">
            <div class="uh bc-head  ubb bc-border" data-control="HEADER" id="Header">
                <div class="ub">
                    <div class="nav-btn" id="nav-left">
                        <div class="fa fa-1g ub-img1">
                        </div>
                    </div>
                    <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">H5标准的设备交互测试</h1>
                    <div class="nav-btn" id="nav-right">
                        <div class="fa  fa-1g  ub-img1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="" data-control="CONTENT" id="ScrollContent">
                <div class="btncss" data-control="BOX">
                    <div class="button ub ub-ac bc-text-head ub-pc bc-btn" onclick="requestLocationPermission()">申请定位权限</div>
                </div>
                <div class="btncss" data-control="BOX">
                    <div class="button ub ub-ac bc-text-head ub-pc bc-btn" onclick="requestResourcePermission()">申请设备资源权限</div>
                </div>
                <div class="btncss" data-control="BOX">
                    <input type="file" id="selectImage" value="选择图片" accept="image/*" class="button ub ub-ac bc-text-head ub-pc bc-btn" onchange="onSelectImage"/>
                </div>
                <div class="btncss" data-control="BOX">
                    <input type="file" id="selectFile" value="选择文件" accept="*/*" class="button ub ub-ac bc-text-head ub-pc bc-btn" onchange="onSelectFile"/>
                </div>
                <div style="height:800px;width:200px">
                </div>
                <div class="btncss" data-control="BOX">
                    <input type="text" id="textbox1" class="button ub ub-ac bc-text-head ub-pc bc-btn" />
                </div>
            </div>
        </div>
        <script src="js/appcan.js">
        </script>
        <script src="js/appcan.control.js">
        </script>
        <script src="js/appcan.scrollbox.js">
        </script>
        <script src="js/template.import.js">
        </script>
        <script src="js/index.js">
        </script>
        <script type="text/javascript">
            function requestLocationPermission(){
                navigator.geolocation.getCurrentPosition(function(position) {
                    alert("定位成功：" + position.coords.latitude + " " + position.coords.longitude);
                },
                function(error){
                    alert("定位失败：" + err.code + ": " + err.message);
                });
            }
            function requestResourcePermission(){
                navigator.mediaDevices.getUserMedia({ audio: true, video: true })
                .then(function(stream) {
                    /* 使用这个stream stream */
                })
                .catch(function(error) {
                    /* 处理error */
                    alert(error);
                });
            }
            function onSelectFile(){
                console.log(document.getElementById('selectImage').files[0].name);
                alert(document.getElementById('selectImage').files[0].name);
            }
            function onSelectImage(){
                console.log(document.getElementById('selectFile').files[0].name);
                alert(document.getElementById('selectFile').files[0].name);
            }
        </script>
    </body>

</html>